<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>js-0511-作业1-螺旋</title>
    <style>
        html{font-family: "Microsoft YaHei";}
        h3,ul{margin: 0;}
        ul{padding: 0;list-style:none;}
        body{
            margin: 0;
            cursor: default;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        .wrap{
            margin: 50px auto;
            width: 200px;
        }
        div{
            width: 200px;
            border: 1px solid #000;
            background-color: #fff;
            box-sizing: border-box;
        }
        h3,li{
            padding-left: 6px;
            width: 100%;
            height: 35px;
            font-size: 16px;
            line-height: 35px;
            box-sizing: border-box;
        }
        h3{
            background-color: #f66;
            font-weight: 700;
            color: #fff;
            cursor: pointer;
        }
        ul{
            display: none;
        }
        .show{
            display: block;
        }
        li{
            color: #666;
            border-bottom: 1px solid #ccc;
        }
        li:hover{
            background-color: #ff9594;
            color: #fff;
        }
    </style>
</head>
<body>
    <section class="wrap">
        <div>
            <h3>第一栏</h3>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
        <div>
            <h3>第二栏</h3>
            <ul>
                <li>11</li>
                <li>22</li>
                <li>33</li>
                <li>44</li>
            </ul>
        </div>
        <div>
            <h3>第三栏</h3>
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
                <li>555</li>
            </ul>
        </div>
    </section>
</body>
<script>
    var oTi = document.getElementsByTagName('h3'),
        oUl = document.getElementsByTagName('ul');

    for(var i=0;i<3;i++){
        oTi[i].num = i;
        oUl[i].num = i;
        oTi[i].bool = true;
        oTi[i].onclick = function(){
            if(this.bool){
                for(var k=0;k<3;k++){
                    oUl[k].className = '';
                    oTi[k].bool = true;
                }
                oUl[this.num].className = 'show';
                this.bool = false;
            }else{
                for(var k=0;k<3;k++){
                    oUl[k].className = '';
                    oTi[k].bool = true;
                }
            }
        }
    }
</script>
</html>